import React, { Component } from 'react';
import "../styles/views/Collection.scss"
import shuju from '../img/shuju.jpeg'

import { good_favlist, good_unfav } from "../api/index"

import { NavBar } from 'antd-mobile'


class Collection extends Component {
    constructor(props) {
        super(props);
        this.state = {
            favlist: []
        }
    }
    back() {
        this.props.history.go(-1)
        // console.log(this.props.location.id.goodid);
    }
    async list() {
        let res = await good_favlist({ userid: localStorage.getItem('id') })
        console.log(res);
        this.setState({
            favlist: res.data.list
        })
    }
    async componentDidMount() {
        let res = await good_favlist({ userid: localStorage.getItem('id') })
        console.log(res);
        this.setState({
            favlist: res.data.list
        })
    }
    async tocancel(id) {
        let res = await good_unfav({ userid: localStorage.getItem('id'), goodid: id })
        console.log(res);
        this.list()
    }
    todetail(id) {
        this.props.history.push({ pathname: '/detail', state: { id } })
    }
    render() {
        return (
            <div className='collection'>
                {/* 顶部导航 */}
                <div className="tou"><NavBar onBack={() => { this.back() }}>我的收藏</NavBar></div>

                {
                    this.state.favlist.map((item, index) => {
                        return (

                            <div className="coll" key={index} >
                                <img src={item.pic} alt="" onClick={() => { this.todetail(item.id) }}/>
                                <div className="name">
                                    <p>{item.name}</p>
                                    <div className="price">原价￥{item.salesPrice.value}</div>
                                </div>
                                <div className='cancel' onClick={() => { this.tocancel(item.id) }}>取消收藏</div>
                            </div>
                        )
                    })
                }
                {
                    this.state.favlist.length === 0 && <img className='img' src={shuju} alt="" />
                }
            </div>
        );
    }
}

export default Collection;